﻿@imports Library
@modelType AccountPeriod

@Code
    ViewData("Title") = Model.Owner
End Code

<style type="text/css">
	table td.title{text-align:left;padding-left:40px;font-weight:bold;color:#333333;font-size:20px;}
	#page tbody td, #page tbody th{padding: .5em .3em;}
</style>

<div id="page_sidebar">

    @code 
        If Model.Owner = "IA" Then
            @<div class="sidebox_wrapper">
                <h5>Nicole</h5>
                <p>本月垫付: <a href="javascript:void(0)" onclick="filterRecord(5, 'Nicole')">@Model.AmountByCategoryAndPayer("垫付", "Nicole")</a></p>
                <p>本月缴付: @Model.AmountByCategoryAndPayer("存入", "Nicole")</p>
                <p>本月提款: @Model.AmountByCategoryAndPayer("提款", "Nicole")</p>
                <p>本月结余: @(Model.AmountByCategoryAndPayer("垫付", "Nicole") - Model.AmountByCategoryAndPayer("存入", "Nicole") - Model.AmountByCategoryAndPayer("提款", "Nicole"))</p>
            </div>

            @<div class="sidebox_wrapper">
                <h5>Vincent</h5>
                <p>本月垫付: <a href="javascript:void(0)" onclick="filterRecord(5, 'Vincent')">@Model.AmountByCategoryAndPayer("垫付", "Vincent")</a></p>
                <p>本月缴付: @Model.AmountByCategoryAndPayer("存入", "Vincent")</p>
                <p>本月提款: @Model.AmountByCategoryAndPayer("提款", "Vincent")</p>
                <p>本月结余: @(Model.AmountByCategoryAndPayer("垫付", "Vincent") - Model.AmountByCategoryAndPayer("存入", "Vincent") - Model.AmountByCategoryAndPayer("提款", "Vincent"))</p>
            </div>
        End If
    End Code

    <div class="sidebox_wrapper">
        <h5>Action</h5>
        <p>@Html.ActionLink("Add Record", "Create", "Transaction", New With{.owner = Model.Owner}, nothing)</p>
        <p><a href="javascript:void(0)" onclick="filterRange(100)">show above 100 only</a></p>
        <p><a href="javascript:void(0)" onclick="filterRecord()">show all spends</a></p>
        <p><a href="javascript:void(0)" onclick="showAll()">show all records</a></p>
    </div>

</div>

<div id="page">

    <div id="page_header" style="position:relative;">
       @Model.Owner
        <div style="position:absolute;top:18px;right:30px;font-size:12px;">
	        <select id="dateInput" name="period"></select>
        </div>
    </div>

    <div id="page_body">
            
        <div class="IE_padding_hack">

            @Html.Hidden("JsonAllData", Model.JsonData)
	
            <div style="margin:10px 0 0 0;">
	
                @If Model.Summary.Id > 0 Then
                    @<p class="total">
                        Spend: <span>@Model.Summary.Spend.ToString("G0")</span> &nbsp;
                        Income: <span>@Model.Summary.Income.ToString("G0")</span> &nbsp;
                        Profit: <span class="@IIf(Model.Summary.Profit.ToString("G0") > 0, "green", "red")">@Model.Summary.profit.ToString("G0")</span>
                    </p>
                End If
            </div>

            <table style="text-align:center;">
	            <tr>
		            <td style="width:45%;">
			            <div id="chart_group"></div>
		            </td>
		            <td style="width:55%;">
			            <div id="chart_pie"></div>
		            </td>
	            </tr>
            </table>
            <div id="details">
	            <div id="chart_table"></div>
            </div>

        </div>
                    
    </div>
        
</div>

@section Scripts
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', { 'packages': ['corechart', 'table'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        var data;
        var view;
        var chart;
        var type = "垫付";
        if ('@Model.Owner' != "IA") { type = "支出" };

        // Callback that creates and populates a data table, 
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            data = new google.visualization.DataTable();
            data.addColumn('string', 'ID');
            data.addColumn('string', 'Date');
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Type');
            data.addColumn('number', 'Amount');
            data.addColumn('string', 'Payer');
            data.addColumn('string', 'Remark');
            if ($("#JsonAllData").val() != "NoData") {
                data.addRows(eval('[' + $("#JsonAllData").val() + ']'));
            }

            data.sort([{ column: 1, desc: true}]);

            var formatter = new google.visualization.TablePatternFormat('<a href="/Transaction/edit?id={0}">Edit</a>');
            formatter.format(data, [0]); // Apply formatter and set the formatted value of the first column.

            var formatterBar = new google.visualization.TableBarFormat({ width: 120 });
            formatterBar.format(data, 4); // Apply formatter to second column

            var formatterColor = new google.visualization.TableColorFormat();
            formatterColor.addRange(200, 1000, '#003C9D', 'transparent');
            formatterColor.addRange(1000, null, '#FF0000', 'transparent');
            formatterColor.format(data, 4); // Apply formatter to second column

            view = new google.visualization.DataView(data);
            view.setRows(view.getFilteredRows([{ column: 3, value: type}]));
            chart = new google.visualization.Table(document.getElementById('chart_table'));
            chart.draw(view, { allowHtml: true });

            // Group dt by column 0, and show column 3 aggregated by sum.
            view = new google.visualization.DataView(data);
            view.setRows(view.getFilteredRows([{ column: 3, value: type}]));
            var grouped_dt = google.visualization.data.group(
		      view, [2],
		      [{ 'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);

            var pie = new google.visualization.PieChart(document.getElementById('chart_pie'));
            pie.draw(grouped_dt, { width: 440, height: 180, title: 'My Family Expense', is3D: true });

            var grouped_dt_table = google.visualization.data.group(
		      view, [2],
		      [{ 'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);

            var formatter2 = new google.visualization.TablePatternFormat('<a href="javascript:void(0)" onclick="filterRecord(2, \'{0}\')">{0}</a>');
            formatter2.format(grouped_dt_table, [0]); // Apply formatter and set the formatted value of the first column.

            var grouped_table = new google.visualization.Table(document.getElementById('chart_group'));
            grouped_table.draw(grouped_dt_table, { allowHtml: true });
        }

        function filterRecord(col1, val1) {
            view = new google.visualization.DataView(data);
            if (col1 == null) {
                view.setRows(view.getFilteredRows([{ column: 3, value: type}]));
            } else {
                view.setRows(view.getFilteredRows([{ column: col1, value: val1 }, { column: 3, value: type}]));
            }
            chart.draw(view, { allowHtml: true });
        }

        function filterRange(val) {
            view = new google.visualization.DataView(data);
            view.setRows(view.getFilteredRows([{ column: 4, minValue: val }, { column: 3, value: type}]));
            chart.draw(view, { allowHtml: true });
        }

        function showAll() {
            view = new google.visualization.DataView(data);
            chart.draw(view, { allowHtml: true });
        }

        $(function () {
            $("#dateInput").change(function () {
                window.location.href = '/AccountPeriod/index?period=' + $("#dateInput").val() + "&owner=@Model.Owner";
            });

            var index = 0;
            if ( '@model.Owner' == "NICOLE"){
                index = 2;
            }else if ( '@model.Owner' == "VINCENT"){
                index = 1;
            };
            $("#global_nav li a").eq(index).addClass("selected");

            var month_names = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
            var date = new Date();
            if (date.getDate() > 28) {
                date.setDate(28);
            }
            var end_date = new Date();
            var value;
            end_date.setFullYear(2010, 6, 30);
            while (date > end_date) {
                value = date.getFullYear() + "-" + month_names[date.getMonth()];
                $("#dateInput").append('<option value="' + value + '">' + value + '</option>');
                date.setMonth(date.getMonth() - 1);
            }

            var str = window.location.href;
            if (str.split("?").length > 1) {
                str = str.split("?")[1].split("&")[0].split("=")[1]
                $("#dateInput option").each(function () {
                    if ($(this).text() == str) {
                        $(this).attr("selected", "selected");
                    }
                });
            }

        });
	
    </script>

End Section

